<!--
/**
* Author: zyf
* Date: 2021-04-08 13:54
* Desc: MovieDiscount
*/
-->
<template>
  <view class="movie-discount">
    <discount-cell
      icon="/cinema-special.png"
      v-if="tpp.salePrice > 0"
      name="淘票票"
      :is-full="isFull"
      :price="tpp.salePrice"
      class="mb10"
    />

    <discount-cell
      name="特惠价"
      icon="/cinema-special.png"
      v-if="discountRule.salePrice > 0"
      :price="discountRule.salePrice"
      has-btn
      :is-full="isFull"
      class="mb10"
      @clickBuy="handleClick('discountRule')"
      yellow
    />

    <discount-cell
      icon="/cinema-breaks.png"
      v-if="discountPackage.salePrice > 0"
      :name="discountName"
      :is-full="isFull"
      :price="discountPackage.salePrice"
      @clickBuy="handleClick('discountPackage')"
      yellow
      has-btn
    />
  </view>
</template>

<script>
  import DiscountCell from './DiscountCell'
  import * as auth from '@/utils/auth'
  export default {
    name: 'MovieDiscount',
    components: { DiscountCell },
    props: {
      otherPrice: {
        type: Object,
        default() {
          return {}
        }
      },
      isFull: {
        type: Boolean
      }
    },
    data() {
      return {}
    },
    computed: {
      discountPackage() {
        return this.otherPrice.discountPackage || {}
      },
      discountRule() {
        return this.otherPrice.discountRule || {}
      },
      tpp() {
        return this.otherPrice.tpp || {}
      },
      discountName() {
        return auth.getLocBaseSet().discountsName
      }
    },
    methods: {
      handleClick(key) {
        this.$emit('clickBuy', key)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .movie-discount {
    position: relative;
    // padding: 16rpx;
    box-sizing: border-box;
    &__icon {
      width: 14px;
      height: 14px;
      background: #fff;
      transform: rotate(45deg);
      position: absolute;
      top: -8px;
      right: 80px;
    }
  }
</style>
